<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网球 - 赛事</title>
    <style>
        /* 这里可以添加一些自定义样式 */
        .event-card {
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 15px;
            border-radius: 5px;
        }
        .event-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .search-box {
            margin-bottom: 20px;
        }
        /* 更多样式... */
    </style>
</head>
<body>
    {% include 'menu.html' %}

    <div class="container">
        <h2>赛事列表</h2>

        <!-- 搜索框 -->
        <div class="search-box">
            <input type="text" id="search" placeholder="搜索赛事...">
            <button onclick="searchEvents()">搜索</button>
        </div>

        <!-- 赛事筛选 -->
        <div class="filter-options">
            <select id="filter-by-date" onchange="filterEvents()">
                <option value="all">所有时间</option>
                <option value="upcoming">即将开始</option>
                <option value="past">已结束</option>
            </select>
            <select id="filter-by-location" onchange="filterEvents()">
                <option value="all">所有地点</option>
                <!-- 其他地点选项 -->
            </select>
        </div>

        <div class="event-list">
            <!-- 赛事项 -->
            <div class="event-card">
                <h3>中网公开赛</h3>
                <p><strong>时间：</strong> 2024-06-10</p>
                <p><strong>地点：</strong> 北京国家网球中心</p>
                <p><strong>描述：</strong> 一年一度的中网公开赛即将开始，精彩不容错过。</p>
                <!-- 添加按钮或其他操作 -->
                <button onclick="location.href='event-detail.html'">查看详情</button>
                <button onclick="shareEvent()">分享</button>
            </div>
            <!-- 更多赛事项 -->
        </div>
    </div>

    <script>
        // JavaScript 函数，用于搜索和筛选事件
        function searchEvents() {
            // 实现搜索逻辑
        }
        function filterEvents() {
            // 实现筛选逻辑
        }
        function shareEvent() {
            // 实现分享逻辑
        }
    </script>
</body>
</html>